<script setup lang="ts">
import { ref } from 'vue';
import homeAlignmentItem from './homeAlignmentItem.vue';
import type { TabsPaneContext } from 'element-plus';
import { AlignmentListType } from '@/interfaces';

const advantage = reactive<AlignmentListType[]>([
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Malphite.png',
    per: 61.75,
  },
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Nasus.png',
    per: 51.25,
  },
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Tryndamere.png',
    per: 68.15,
  },
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Irelia.png',
    per: 31.77,
  },
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Mordekaiser.png',
    per: 60.35,
  },
]);

const disAdvantage = reactive<AlignmentListType[]>([
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Lucian.png',
    per: 41.05,
  },
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Ryze.png',
    per: 51.35,
  },
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Leblanc.png',
    per: 53.65,
  },
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Renekton.png',
    per: 55.77,
  },
  {
    src: 'https://game.gtimg.cn/images/lol/act/img/champion/Hecarim.png',
    per: 58.9,
  },
]);

// 优劣势对线
const activeName = ref<string>('advantage');
const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.props.name as string;
};
</script>

<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="优势对线" name="advantage">
      <homeAlignmentItem :alignmentList="advantage" />
    </el-tab-pane>
    <el-tab-pane label="劣势对线" name="disadvantage">
      <homeAlignmentItem :alignmentList="disAdvantage" />
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss"></style>
